<<<<<<< HEAD
=======
<template>
  <div>
    <el-card v-if="cardShow === 1">
      <el-row type="flex" justify="end" style="margin-bottom: 20px">
        <el-button size="mini" plain type="primary" @click="addPaper"
          >新增试卷</el-button
        >
      </el-row>
      <el-form
        ref="form"
        :model="formData"
        :inline="true"
        label-width="100px"
        label-position="right"
        size="small"
      >
        <el-form-item label="试卷名称">
          <el-input
            v-model="formData.paper_name"
            placeholder="请输入试卷名称"
          />
        </el-form-item>
        <el-form-item label="归属学科">
          <el-select
            v-model="formData.subject_id"
            placeholder="请选择学科"
            @focus="getSubjectTree"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="归属目录">
          <el-select
            v-model="formData.directory_id"
            placeholder="请选择目录"
            @focus="getdirectoryList"
          >
            <el-option
              v-for="item in directoryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="发布状态">
          <el-select v-model="formData.show_state" placeholder="请选择发布状态">
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="2" />
          </el-select>
        </el-form-item>
        <br />

        <el-form-item label="试卷难度">
          <el-select
            v-model="formData.difficulty"
            style="width: 178px"
            placeholder="请选择难度"
            clearable
          >
            <el-option label="简单" :value="1" />
            <el-option label="中等" :value="2" />
            <el-option label="较难" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="试卷类型">
          <el-select
            v-model="formData.paper_type"
            placeholder="请选择试卷类型"
            clearable
          >
            <el-option label="模拟卷" :value="1" />
            <el-option label="真题卷" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="create_time"
            style="width: 190px"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="创建人">
          <el-input v-model="formData.create_name" placeholder="请输入创建人" />
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button type="primary" size="small" @click="getPaperList"
          >查询</el-button
        >
        <el-button size="small" @click="resetBtn">重置</el-button>
      </el-row>
      <br />
      <el-table :data="list" border>
        <el-table-column prop="paper_name" label="试卷名称" />
        <el-table-column prop="subject_name" align="center" label="学科名称" />
        <el-table-column
          prop="directory_name"
          align="center"
          label="目录名称"
        />
        <el-table-column prop="paper_type" align="center" label="试卷类型">
          <template slot-scope="scope">
            <span v-if="scope.row.paper_type == 1">模拟卷</span>
            <span v-if="scope.row.paper_type == 2">真题卷</span>
          </template>
        </el-table-column>
        <el-table-column prop="show_state" align="center" label="试卷状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.show_state"
              :active-value="1"
              :inactive-value="2"
              @change="change_status(scope.row.id, $event)"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="分数情况">
          <template slot-scope="scope">
            <span>{{ scope.row.pass_score }}/{{ scope.row.total_score }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" align="center" label="试卷难度">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty == 1">简单</span>
            <span v-if="scope.row.difficulty == 2">中等</span>
            <span v-if="scope.row.difficulty == 3">较难</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_name" align="center" label="创建人" />
        <el-table-column prop="created_at" label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.created_at | formatTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="查看"
              placement="top"
            >
              <el-button
                size="small"
                type="text"
                icon="el-icon-view"
                @click="viewBtn(scope.row.id)"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="修改"
              placement="top"
            >
              <el-button
                size="small"
                type="text"
                icon="el-icon-edit"
                @click="editBtn(scope.row.id)"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <el-button
                size="small"
                type="text"
                icon="el-icon-delete"
                @click="delPaper(scope.row.id)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分液器 -->
      <el-pagination
        :current-page="formData.page"
        :page-sizes="[10, 8, 6, 4]"
        :page-size="formData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <PaperInfo v-if="cardShow === 3" ref="view" @goback="goback" />
    <AddPaper v-if="cardShow === 2" ref="addPaper" @goback="goback" />
  </div>
</template>

<script>
import { getSubjectTree } from "@/api/subject/subject";
import {
  getPaperList,
  PaperStatus,
  delPaper,
  viewPaper,
  getPaperInfo,
} from "@/api/exam/paper";
import PaperInfo from "./components/paperInfo.vue";
import AddPaper from "./components/addPaper.vue";
export default {
  name: "PaperIndex",
  components: {
    PaperInfo,
    AddPaper,
  },
  data() {
    return {
      cardShow: 1,
      subjectList: [],
      directoryList: [],
      create_time: [],
      list: [],
      total: 0,
      formData: {
        subject_id: "", // 学科名称id
        directory_id: "", // 目录名称id
        show_state: "", // 试卷状态
        paper_type: "", // 试卷类型
        paper_name: "", // 试卷名称
        create_name: "", // 创建人
        difficulty: "", // 试卷难易程度
        create_time: "", // 创建时间-日期选择器
        directory_name: "", // 目录名称
        subject_name: "", // 学科名称
        total_score: "", // 总分
        pass_score: "", // 及格分
        created_at: "", // 创建时间
        page: 1,
        limit: 10,
      },
    };
  },
  watch: {
    create_time(val) {
      console.log(val);
      console.log(+new Date(val[0]));
      new Date(val[0]);
      this.formData.create_time = `${+new Date(val[0])},${+new Date(val[1])}`;
    },
  },
  created() {
    this.getPaperList();
  },
  methods: {
    async getSubjectTree() {
      this.subjectList = await getSubjectTree();
    },
    async getdirectoryList() {
      try {
        this.directoryList = await this.subjectList.filter(
          (item) => item.id === this.formData.subject_id
        )[0].children;
        console.log(this.directoryList);
      } catch (err) {
        this.directoryList = [];
      }
    },
    resetBtn() {
      this.formData = {};
      this.getPaperList();
    },
    async getPaperList() {
      // const res = await getPaperList(this.formData)
      // console.log(res)
      const { list, total } = await getPaperList(this.formData);
      this.list = list;
      this.total = total;
    },
    async handleSizeChange(val) {
      this.formData.limit = val;
      await this.getPaperList();
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    async handleCurrentChange(val) {
      this.formData.page = val;
      await this.getPaperList();
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    async change_status(id, state) {
      await PaperStatus(id, state);
      this.$message.success("切换成功");
    },
    async delPaper(id) {
      await delPaper(id);
      this.$message.success("删除成功");
      this.getPaperList();
    },
    async viewBtn(id) {
      this.cardShow = 3;
      const res = await viewPaper(id);
      this.$refs.view.paperInfo = res;
    },
    goback() {
      this.cardShow = 1;
      this.getPaperList();
    },
    addPaper() {
      this.cardShow = 2;
    },
    async editBtn(id) {
      this.cardShow = 2;
      this.$refs.addPaper.formData = await getPaperInfo(id);
    },
  },
};
</script>

<style></style>
>>>>>>> f813540e5411455e7f6aef78f278a4ef7a04d3d2
